import React, { Component } from 'react';
import {Image, View} from '@tarojs/components'
import {RecordItem} from '../../utils/server.interface'
import {http} from '../../utils/http'
import {RESOURCE_URL, WITHDRAWLISTPAGE} from '../../constants/api'
import {GetRequest, vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './rule.scss'

interface PageType {
  curTabIndex: number
  loadMoreStatus: "more" | "loading" | "noMore"
  recordList: RecordItem[]
  supplierId: number
}

export default class Record extends Component {
  state: PageType = {
    curTabIndex: 0,
    loadMoreStatus: 'loading',
    recordList: [],
    supplierId: 0
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      this.page++
      const recordList = await this.getData(this.page)
      const old = this.state.recordList
      if (recordList) {
        this.setState({recordList: [...old, ...recordList]})
      }
    }
  }

  page = 1

  async componentDidShow() {
    vcmonitor(this)
    const recordList = await this.getData(this.page)
    console.log(recordList)
    this.setState({recordList})
  }

  async getData(page) {
    const {supplierId} = Taro.getCurrentInstance().router.params
    const recordList = await http.HGet(WITHDRAWLISTPAGE, {page: page, supplierId, limit: 10})
    if (recordList.recordsTotal > this.page * 10) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return recordList.data
  }

  render() {
    const {recordList} = this.state
    return (
      <View className='rule-page-root'>
        <GzhAuth />
        {recordList && recordList.length > 0 && recordList.map(item => <View className='item'>
          <View className='title'>{item.subject}
            <View className='time'>{item.addDate}</View>
            {item.payDate && <View className='alipay_no'>支付时间：{item.payDate}</View>}
            {item.status && <View className='alipay_no'>状态：{item.status}</View>}
            {item.money && <View className='alipay_no'>提现金额：{item.money}</View>}
          </View>
        </View>)}
        {recordList && recordList.length <= 0 &&
        <View className='listNull'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>
        }
      </View>
    )
  }
}
